<style scoped>
    .page_warp {
        background:#FFDF73;
        min-height: 100%;
    }
    #huodongdb {
        padding-top: 0.38rem;
    }
    img{
        display: block;
    }
    header>img{
        width: 100%;
    }
    section{
        padding: 0.15rem 0.1rem;
    }
    section>div{
        box-sizing: border-box;
        width: 100%;
        height: 0.5rem;
        background-color: white;
        border-radius: 0.075rem;
        padding: 0.1rem;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -webkit-align-items: center;
        box-shadow: 0 0.03rem 0 #FFC337;
        margin-bottom: 0.15rem;
    }
    section>div>a{
        font-size: 0.13rem;
        color: white;
        background-color:rgb( 219, 55, 82 );
        border-radius: 0.05rem;
        border: none;
        padding:0.03rem 0.08rem;
        box-shadow:0 0.02rem  0 #BC0B1A;
        text-decoration: none;
    }
    .text>div>span{font-size: 0.15rem}
    .text>div>span:last-child{
        font-size: 0.12rem;
        color: #DB3A53;
        -webkit-text-size-adjust: none;
    }
    .text>div{
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }
    #buttomTu{
        width: 100%;
        height: 0.1rem;
        background-color: #BC0B1A;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    footer>div{
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
    }
    footer>div>a{
        font-size: 0.21rem;
        font-weight: 900;
        color: white;
        background-color: #BC0B1A;
        border-top-left-radius: 0.06rem;
        border-top-right-radius: 0.06rem;
        border: none;
        padding: 0.025rem 0.13rem;
        position: relative;
        z-index: 2;
        text-decoration: none;
    }
    footer>div.back>div{
        width: 1.35rem;
        height: 0.02rem;
        background-color: rgb( 214, 47, 65 );
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        position: relative;
        top: -1px;
    }
    .back{
        margin-top: 0.1rem;
        margin-bottom: 0.3rem;
        background:#FFDF73;
    }
    .point{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }
    #point{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        position: relative;
        top: 0.05rem;
        left: -0.05rem;
    }
    #point>div{
        width: 0.1rem;
        height: 0.1rem;
        background-color: #BC0B1A;
        border-radius: 50%;
    }
    .toBottom{
        position: fixed;
        bottom: 0;
    }
</style>
<template>
    <header-component :page-name="pageName"></header-component>

    <div class="page_warp">
        <div id="huodongdb">
            <header>
                <img src="../images/banner_01.png" alt="">
            </header>
            <section>
                <div>
                    <div class="text">
                        <div>
                            <span>每日签到</span>
                            <span>用户连续签到获取积分，详情如下</span>
                        </div>
                    </div>
                    <a href="javascript:;" id="page_score_sign" @click="sign">点击签到</a>
                </div>
                <div>
                    <div class="text">
                        <div>
                            <span>邀请好友</span>
                            <span>邀请一位好友成功关注，获取40积分</span>
                        </div>
                    </div>
                    <a href="javascript:;" @click="invita">立即邀请</a>
                </div>
                <div>
                    <div class="text">
                        <div>
                            <span>充值消费</span>
                            <span>充值或在线支付可获得等额积分</span>
                        </div>
                    </div>
                    <a v-link="{path:'/list'}">立即消费</a>
                </div>
                <div>
                    <div class="text">
                        <div>
                            <span>完成晒单</span>
                            <span>领奖后，完成晒单，获取20积分</span>
                        </div>
                    </div>
                    <a v-link="{path:'/winRecord'}">立即晒单</a>
                </div>
            </section>
            <footer>
                <div class="back">
                    <a v-link="{path:'/home'}">回到首页</a>
                    <div></div>
                </div>
                <div class="toBottom">
                    <div class="point">
                        <div id="point">
                            <div v-for="n in 38"></div>
                        </div>
                    </div>
                    <div id="buttomTu">
                    </div>
                </div>
            </footer>
        </div>
        <div class="qrcode_mask">
            <div class="qrcode_popUp">
                <div>

                </div>
            </div>
        </div>
    </div>

    <pop :status-toast="statusToast" :status-pop="statusPop" :msg="msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>

</template>

<script>
    import pop from '../components/pop'
    import headerComponent from '../components/header'
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    export default{
        data(){
            return{
                statusPop:false,
                statusToast:false,
                msg:'',
                pageName: '赚取积分'
            }
        },
        created(){
            this.$dispatch('isLoading',true)
        },

        async ready(){
            this.$dispatch('isLoading',false);
        },
        methods:{
            invita(){
                console.log('invita click')
                location.href = 'http://api.lydb.weizhuanqiandao.com/Invita/showInvitaQrcode/?uid='+User.uid;
            },
            async sign(){
                if(User.isLogin){
                    let res=await Request.get(Config.apiDomain+"/Invita/user_sign?token="+User.token);
                    if(res.status==200){
                        this.statusToast=true;
                        this.msg='签到成功';
                    }
                }else{
                    this.msg='您还未登录，请先登录';
                    this.statusPop=true;
                }
            }
        },
        components:{
            headerComponent,
            pop
        }
    }
</script>
